<script type="text/javascript">
	var asInitVals = new Array();
	$(document).ready(function() {
		var oTable = $('#data').dataTable({
			"bJQueryUI": true,
			"sPaginationType": "full_numbers",
			"aaSorting": [ [1,'asc'] ],
			"aoColumnDefs": [ { "sType": "formatted-num", "aTargets": [ 5, 6 ] } ]
        });

        $("tfoot input").keyup( function () {
        	oTable.fnFilter( this.value, $("tfoot input").index(this) );
    	});

		$("tfoot input").each( function (i) {
        	asInitVals[i] = this.value;
    	} );
     
    	$("tfoot input").focus( function () {
        	if ( this.className == "search_init" )
        	{
            	this.className = "";
            	this.value = "";
        	}
    	});
     
    	$("tfoot input").blur( function (i) {
        	if ( this.value == "" )
        	{
            	this.className = "search_init";
            	this.value = asInitVals[$("tfoot input").index(this)];
        	}
    	});
    });
</script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="data">
    <thead>
        <tr>
			<th>Código</th>
			<th>Producto</th>
			<th>Marca</th>
			<th>Modelo</th>
			<th>Talla</th>
			<th>Costo</th>
			<th>Precio</th>
        </tr>
    </thead>
    <tbody>
	<?php foreach ($productos as $p) { ?>
		<tr>
			<td style="vertical-align:middle;"><?php echo $p['Producto']['codigo']; ?></td>
			<td style="vertical-align:middle;"><?php echo $p['Producto']['descripcion']; ?></td>
			<td style="vertical-align:middle;"><?php echo $p['Producto']['marca']; ?></td>
			<td style="vertical-align:middle;"><?php echo $p['Producto']['modelo']; ?></td>
			<td style="vertical-align:middle;"><?php echo $p['Producto']['talla']; ?></td>
			<td style="text-align:right; vertical-align:middle;"><?php echo 'S/. '.$p['Producto']['costo']; ?></td>
			<td style="text-align:right; vertical-align:middle;"><?php echo 'S/. '.$p['Producto']['precio']; ?></td>
		</tr>
	<?php } ?>
    </tbody>
    <tfoot>
		<tr>
			<th>
				<input type="text" value="Codigo" class="search_init">
			</th>
			<th>
				<input type="text" value="Producto" class="search_init">
			</th>
			<th>
				<input type="text" value="Marca" class="search_init">
			</th>
			<th>
				<input type="text" value="Modelo" class="search_init">
			</th>
			<th>
				<input type="text" value="Talla" class="search_init">
			</th>
			<th>
				<input type="text" value="Costo" class="search_init">
			</th>
			<th>
				<input type="text" value="Precio" class="search_init">
			</th>
		</tr>
	</tfoot>
</table>